﻿<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8"/>
    <title>订单支付</title>

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="boxed">
<div id="wrapper">

    <!-- Header
            ================================================== -->
    <div th:replace="fragments/header :: header"></div>


    <!-- Titlebar
    ================================================== -->
    <section class="parallax-titlebar fullwidth-element" data-background="#000" data-opacity="0.45" data-height="160">

        <img th:src="@{/images/titlebar_bg_02.jpg}" alt=""/>
        <div class="parallax-overlay"></div>

        <div class="parallax-content">
            <h2>订单支付 <span></span></h2>

            <nav id="breadcrumbs">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="my-account.html">个人中心</a></li>
                    <li>订单支付</li>
                </ul>
            </nav>
        </div>
    </section>


    <div class="container">

        <!-- Tabs
        ================================================= -->
        <div class="eight columns">
            <h3 class="headline">支付详情</h3><span class="line margin-bottom-3-"></span>
            <div class="clearfix"></div>

            <!-- Tabs Content -->
            <div class="tabs-container">
                <div class="tab-content" id="tab1">
                    <table class="cart-table margin-top-5">
                        <tr>
                            <th>订单号</th>
                            <td><strong th:text="${order.order_id}"></strong></td>
                        </tr>
                        <tr>
                            <th>商品费用</th>
                            <td th:text=" '¥' + ${order.item_total_price}"></td>
                        </tr>
                        <tr>
                            <th>运费</th>
                            <td th:text=" '¥' + ${order.post_fee}"></td>
                        </tr>
                        <tr>
                            <th>共需支付</th>
                            <td><strong th:with=" total = (${order.item_total_price} + ${order.post_fee}) "
                                         th:text="'¥' + ${#numbers.formatDecimal(total, 0, 2)}"></strong></td>
                        </tr>
                    </table>
                </div>
            </div>
            <br></br>

            <a th:href="@{myUnpaidOrder}" class="button">暂不支付</a>
        </div>


        <!-- Accordion
        ================================================== -->
        <div class="eight columns">
            <h3 class="headline">支付方式</h3><span class="line margin-bottom-35"></span>
            <div class="clearfix"></div>

            <!-- Accordion -->
            <div class="accordion">

                <!-- Section 1 -->
                <h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i
                        class="fa fa-life-saver"></i> 支付宝</h3>
                <div>
                    <p>打开你的支付宝扫描下方二维码转入“共需支付”金额，转账完成确认无误后点击“已支付“按钮，等待管理员审核成功后发货。</p>
                    <img th:src="@{/images/other/alipay.jpg}" alt=""/>
                    <form th:action="@{paid}">
                        <input type="submit" class="button" name="" value="已支付"/>
                        <input type="hidden" id="order_id" name="order_id" th:value="${order.order_id}"/>
                    </form>
                </div>

                <!-- Section 2 -->
                <h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i class="fa fa-user"></i>
                    微信</h3>
                <div>
                    <p>打开你的微信扫描下方二维码转入“共需支付”金额，转账完成确认无误后点击“已支付“按钮，等待管理员审核成功后发货。</p>
                    <img th:src="@{/images/other/wechatpay.jpg}" alt=""/>
                    <form th:action="@{paid}">
                        <input type="submit" class="button" name="" value="已支付"/>
                        <input type="hidden" id="order_id" name="order_id" th:value="${order.order_id}"/>
                    </form>
                </div>

                <!-- Section 3 -->
                <h3><span class="ui-accordion-header-icon ui-icon ui-accordion-icon"></span><i class="fa fa-trophy"></i>
                    其他</h3>
                <div>
                    <p>其他支付方式暂未开通，目前仅支持支付宝或微信转账，为您带来的不便敬请谅解！</p>
                </div>

            </div>
            <!-- Accordion / End -->
        </div>

        <div class="clearfix"></div>
        <br></br>

        <div class="margin-top-50"></div>


        <!-- Footer
            ================================================== -->
        <div th:replace="fragments/footer :: footer"></div>

    </div>

</div>


<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>